<template>
  <div>
    <v-card :color="getTypeInfo(type,'color')" class="white--text">
      <v-layout wrap row>
        <v-flex xs7>
          <v-card-title primary-title>
            <div class="textBox">
              <div class="wtitle">{{name}}</div>
              <div class="wtype">{{getTypeInfo(type,'name')}}</div>
            </div>
          </v-card-title>
        </v-flex>
        <v-flex xs5>
          <v-img :src="getTypeInfo(type,'logo')" height="100px" contain></v-img>
        </v-flex>
        <v-flex class="tips" xs12>
          <div class="tip_divider"></div>
          <div class="tip_text">{{tips}}</div>
        </v-flex>
      </v-layout>
    </v-card>
  </div>
</template>
<script>
export default {
  props: ['type', 'name', 'tips'],
  data () {
    return {
      colorList: {
        '0': 'rgba(23, 59, 107,0.7)',
        '1': 'rgba(230, 33, 41,0.7)',
        '2': 'rgba(106, 72, 63,0.7)',
        '3': 'rgba(44, 43, 40,0.7)'
      }
    }
  },
  methods: {
    getTypeInfo (typeNum, type) {
      let info = this.$store.getters.wasteInfo(typeNum);
      if (type === 'name') {
        return info.name;
      } else if (type === 'logo') {
        return '/img/' + info.logo;
      } else if (type === 'img') {
        return '/img/' + info.img;
      } else if (type === 'color') {
        return this.colorList[typeNum];
      } else {
        return info;
      }

    }
  }
}
</script>
<style lang="less" scoped>
@residualColor: rgb(44, 43, 40);
@foodColor: rgb(106, 72, 63);
@hazardousColor: rgb(230, 33, 41);
@recylableColor: rgb(23, 59, 107);
.textBox {
  color: #fff;
  .wtitle {
    font-size: 20px;
  }
  .wtype {
    margin-top: 5px;
    font-size: 15px;
  }
}
.tips {
  .tip_text {
    padding: 5px 16px;
    font-size: 14px;
    color: #ccc;
  }
  .tip_divider {
    height: 2px;
    background-color: #fff;
  }
}
</style>
